<template>
    <div class="shop-box">
        <div class="header">购物车</div>
        <div class="safe-top"/>
        <div class="shopping-main">
            <div class="main" v-if="false">
                <p class="image"> <img src="../../assets/image/empty.png" alt=""></p>
                <p>购物车空空</p>
                <p><a class="btn" href="javascript:void (0)">立即购物</a></p>
            </div>
            <div class="card-box">
              <div class="header-box"><van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked">Boutique Office Stationery Store</van-checkbox></div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="safe"/>
              <div class="submit-bottom">
                <span><van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked">全选</van-checkbox></span>
                <div class="info-box">
                 <p>总计 <b>$253.66</b></p>
                 <p>选择 <b>1</b>个</p>
                </div>
                <button @click="$router.push('/pay')">立即购买</button>
              </div>
            </div>
            <div class="card-box">
              <div class="header-box"><van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked">Boutique Office Stationery Store</van-checkbox></div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-box-item">
                <div class="left-box">
                  <van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked"></van-checkbox>
                </div>
                <div class="right-box">
                  <img src="../../assets/image/81XJTc4MT4L._AC_UL1500_.jpg" alt="">
                  <div class="right">
                    <p class="title"> Snpurdiri 60% 有线游戏键盘，RGB 背光超紧凑型迷你键盘，防水小型紧凑型... </p>
                    <p class="sku_box"> 颜色:黑色和红色</p>
                    <p class="price">
                      <span>$215.99</span>
                      <van-stepper button-size="22px" v-model="value" />
                    </p>
                  </div>
                </div>
              </div>
              <div class="safe"/>
              <div class="submit-bottom">
                <span><van-checkbox icon-size="16px" checked-color="#f89900" v-model="checked">全选</van-checkbox></span>
                <div class="info-box">
                 <p>总计 <b>$253.66</b></p>
                 <p>选择 <b>1</b>个</p>
                </div>
                <button @click="$router.push('/pay')">立即购买</button>
              </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return{
            checked:false,
            value: 1,
          }
      }
    }
</script>

<style scoped lang="scss">
    .shop-box{
        width: 100%;
        box-sizing: border-box;
        min-height: 100vh;
        background: #f5f5f7;
        .header {
            position: fixed;
            top: 0;
            z-index: 999;
            background: #fff;
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            margin: 0 auto;
            color: #323233;
            font-weight: 500;
            font-size: 14px;
        }
        .safe-top{
            height: 45px;
            width: 100%;
        }
        .shopping-main{
            width: 100%;
            min-height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .main{
                width: 150px;
                .image{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    height: 100px;
                }
                img{
                    height: 100px;
                }
                p{
                    text-align: center;
                    font-size: 14px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                }
                .btn{
                    width: 100px;
                    height: 40px;
                    background: #002FFF;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 14px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }


        }
        .card-box{
          width: 100%;
          height: 80vh;
          overflow-y: scroll;
          padding: 3%;
          box-sizing: border-box;
          .header-box{
            width: 100%;
            height: 30px;
            font-size: 14px;
            padding: 0 0 0 20px;
            box-sizing: border-box;
          }
          .card-box-item{
            width: 100%;
            height: 110px;
            background: #fff;
            margin-bottom: 20px;
            display: flex;
            padding: 3% 0;
            .left-box{
              width: 40px;
              height: 100px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .right-box{
              width: 100%;
              height: 100px;
              display: flex;
              align-items: center;
              img{
                width: 60px;
                height: 60px;
              }
              .right{
                width: 100%;
                height: 100px;
                padding: 3%;
                box-sizing: border-box;
                .title{
                  width: 100%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -moz-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .sku_box{
                  height: 20px;
                  margin-bottom: 10px;
                  font-size: 12px;
                  width: 100%;
                }
                .price{
                  width: 100%;
                  height: 30px;
                  display: flex;
                  justify-content: space-between;
                  span{
                    color: #f89220;
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .safe{
            height: 110px;
            width: 100%;
          }
          .submit-bottom{
            height: 60px;
            background: #fff;
            position: fixed;
            bottom: 65px;
            left: 0;
            width: 100%;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 3%;
            box-sizing: border-box;
            span{
              font-size: 16px;
              b{
                color: #002FFF;
              }
            }
            .info-box{
              p:nth-child(1){
                font-size: 14px;
                b{
                  color: #f89220;
                  font-size: 16px;
                }
              }
              p:nth-child(2){
                font-size: 14px;
                b{
                  color: #f89220;
                  font-size: 16px;
                  margin: 0 5px;
                }
              }
            }
            button{
              width: 100px;
              height: 40px;
              border: none;
              background: #f89220;
              color: #fff;
              font-size: 14px;
              border-radius: 5px;
            }
          }
      }
    }
</style>
